<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" :rules="type !== 'detail' ? rules : {}" ref="cationInformation" label-width="140px" :label-position="type == 'detail' ? 'right' : 'top'">
      <div class="card-title-wrap">
        <span>申请信息</span>
        <span></span>
      </div>
      <div :style="{ marginLeft: type == 'detail' ? '' : '50px' }">
        <div :style="{ marginLeft: type == 'detail' ? '80px' : '10px' }" style="display: flex; justify-content: space-between; align-items: center; width: 55%; color: #606266; font-size: 14px">
          <p>
            供应商: <span style="color: rgba(0, 0, 0, 0.8)">{{ form.supplierName }}</span>
          </p>
          <p>
            委外收车工单: <span style="color: rgba(0, 0, 0, 0.8)">{{ form.backCarCode }}</span>
          </p>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 20px">
          <el-form-item label="开户银行:" prop="bankOfDeposit" style="min-width: 33%">
            <!-- <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.bankOfDeposit" placeholder="请输入开户银行"> </el-input> -->
            <el-select clearable v-if="type !== 'detail'" v-model="form.bankOfDeposit" placeholder="请选择开户银行" style="width: 80%" @change="changeSelect">
              <el-option v-for="item in selectListData" :key="item.label" :label="item.label" :value="item.label"> </el-option>
            </el-select>
            <span v-if="type == 'detail'">{{ form.bankOfDeposit }}</span>
          </el-form-item>
          <el-form-item label="收款账号:" prop="receivablesAccount" style="min-width: 33%">
            <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.receivablesAccount" placeholder="请输入收款账号" readonly> </el-input>
            <span v-if="type == 'detail'">{{ form.receivablesAccount }}</span>
          </el-form-item>
          <el-form-item label="开户名称:" prop="accountName" style="min-width: 33%">
            <el-input v-if="type !== 'detail'" style="width: 80%" v-model="form.accountName" placeholder="请输入开户名称" readonly> </el-input>
            <span v-if="type == 'detail'">{{ form.accountName }}</span>
          </el-form-item>
        </div>
        <el-form-item label="说明:" prop="notes">
          <el-input v-if="type !== 'detail'" style="width: 70%" type="textarea" placeholder="请输入说明" v-model="form.notes" maxlength="500" :rows="5" show-word-limit> </el-input>
          <span v-if="type == 'detail'">{{ form.notes }}</span>
        </el-form-item>
        <el-form-item label="附件:" prop="attachments">
          <ImageCommon v-if="type !== 'detail'" :up-type="2" info="选择附件" :limit="5" v-model="form.attachments"></ImageCommon>
          <ImageCommon v-if="type == 'detail'" :up-type="2" info="选择附件" v-model="form.attachments" disabled></ImageCommon>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { SupplierDetails } from '@/api/finance/reimburs/add/api.js'
export default {
  // 客户信息
  name: 'cationInformationFK',
  components: {
    SearchContent,
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      selectListData: [],
      rules: {
        receivablesAccount: [
          {
            required: true,
            message: '请输入收款账号',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.SupplierDetails(this.$route.query.supplierId || this.form.supplierId)
  },
  methods: {
    changeSelect() {
      let obj = this.selectListData.filter((v) => v.bankName == this.form.bankOfDeposit)[0]
      this.$set(this.form, 'receivablesAccount', obj?.accountNumber)
      this.$set(this.form, 'accountName', obj?.accountName)
      this.$set(this.form, 'bankCode', obj?.bankCode)
    },
    async SupplierDetails(supplierId) {
      try {
        let res = await SupplierDetails(supplierId)
        this.selectListData = res.data?.accounts?.filter((item) => {
          item.label = item.bankName
          return item.accountStatus == '0'
        })
        console.log(this.selectListData, 'this.selectListData')
      } catch (error) {}
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
